<template>
    <div>
        <div class="header-tips">
            <div class="header-tips-content">
                <div class="tips-left">
                    <div class="icon-wrapper">
                        <el-icon class="warning-icon">
                            <Warning />
                        </el-icon>
                    </div>
                    <div class="tips-info">
                        <span class="tips-label mr-2">营销通知</span>
                        <span class="tips-time">发布时间：2025-09-03 10:00:00</span>
                    </div>
                </div>
                <div class="tips-divider">
                    <el-icon class="arrow-icon">
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="tips-content">
                    一个推广产品优化异常，我们发现您的一个推广发现异常，请及时处理
                </div>
            </div>
        </div>
        <div>
            <el-segmented v-model="tag_value" :options="options" :direction="direction" size="default"
                class="segmented-wrap">
                <template #default="{ item }">
                    <div v-if="(item as any).value !== '日期'" :class="[
                        'flex',
                        'items-center',
                        'gap-2',
                        'flex-col',
                        direction === 'horizontal' && 'p-2',
                    ]">
                        <!-- <el-icon size="20">
                            <component :is="(item as any).icon" />
                        </el-icon> -->
                        <div>{{ (item as any).label }}</div>
                    </div>

                    <div v-else>
                        <el-date-picker v-model="time_value" type="datetimerange" :shortcuts="shortcuts"
                            range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
                    </div>
                </template>
            </el-segmented>

            <div class="flex justify-between">
                <div>
                    核心指标
                </div>
                <div>
                    <el-segmented v-model="zs_value" :options="zs_options" block @change="zsChangeMth" />
                </div>
            </div>
            <div class="echarts-wrap flex justify-around" v-show="zs_value == '趋势图'">
                <el-card class="w-full metric-card">
                    <div class="metric-title">曝光量</div>
                    <div class="metric-value1">90</div>
                    <div class="metric-delta up">
                        <el-icon>
                            <ArrowUp />
                        </el-icon>
                        <span class="ml-2">+12.5%</span>
                    </div>
                    <div ref="exposureChartRef" class="chart-container"></div>
                </el-card>
                <el-card class="w-full metric-card">
                    <div class="metric-title">深度转化量</div>
                    <div class="metric-value2">90</div>
                    <div class="metric-delta up">
                        <el-icon>
                            <ArrowUp />
                        </el-icon>
                        <span class="ml-2">+12.5%</span>
                    </div>
                    <div ref="deepChartRef" class="chart-container"></div>
                </el-card>
                <el-card class="w-full metric-card">
                    <div class="metric-title">目标转化量</div>
                    <div class="metric-value3">90</div>
                    <div class="metric-delta up">
                        <el-icon>
                            <ArrowUp />
                        </el-icon>
                        <span class="ml-2">+12.5%</span>
                    </div>
                    <div ref="goalsChartRef" class="chart-container"></div>
                </el-card>
                <el-card class="w-full metric-card">
                    <div class="metric-title">目标转化成本</div>
                    <div class="metric-value4">90</div>
                    <div class="metric-delta up">
                        <el-icon>
                            <ArrowUp />
                        </el-icon>
                        <span class="ml-2">+12.5%</span>
                    </div>
                    <div ref="costChartRef" class="chart-container"></div>
                </el-card>
            </div>

            <div class="echarts-wrap flex justify-around" v-show="zs_value == '环比图'">
                <el-card class="w-full metric-card">
                    <div ref="exposureChartRingRef" class="chart-containerRing"></div>
                </el-card>
                <el-card class="w-full metric-card">
                    <div ref="deepChartRingRef" class="chart-containerRing"></div>
                </el-card>
                <el-card class="w-full metric-card">
                    <div ref="goalsChartRingRef" class="chart-containerRing"></div>
                </el-card>
                <el-card class="w-full metric-card">
                    <div ref="costChartRingRef" class="chart-containerRing"></div>
                </el-card>
            </div>

            <div class="mt-4">
                <el-card class="chart-card" shadow="hover" v-loading="chartLoading">
                    <template #header>
                        <div class="chart-header">
                            <span class="chart-title">消耗趋势</span>
                        </div>
                    </template>
                    <div ref="revenueChartRef" class="chart-container-count"></div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch, computed } from 'vue'
import { Warning, ArrowRight, Apple, Cherry, Grape, Orange, Pear, Watermelon } from '@element-plus/icons-vue'
import { getDashboardStats, getDashboardChartData, type DashboardStats, type ChartData } from '@/api/dashboard'
import * as echarts from 'echarts'
const direction = ref('horizontal')
const tag_value = ref('总览')
const options = [
    { label: '总览', value: '总览', icon: Apple },
    { label: '账户', value: '账户', icon: Cherry },
    { label: '主体', value: '主体', icon: Grape },
    { label: '业务单元', value: '业务单元', icon: Orange },
    { label: '服务商', value: '服务商', icon: Pear },
    { label: '日期', value: '日期', icon: Watermelon, disabled: true },
]

const zs_value = ref('趋势图')
const zs_options = [
    { label: '趋势图', value: '趋势图' },
    { label: '环比图', value: '环比图' },
]


function getMonthRange(): [Date, Date] {
    const start = new Date()
    start.setHours(0, 0, 0, 0)
    start.setDate(1)

    const end = new Date(start)
    end.setMonth(end.getMonth() + 1)
    end.setDate(0)
    end.setHours(23, 59, 59, 999)
    return [start, end]
}

function getQuarterRange(): [Date, Date] {
    const now = new Date()
    const month = now.getMonth() // 0-11
    const quarterStartMonth = Math.floor(month / 3) * 3

    const start = new Date(now.getFullYear(), quarterStartMonth, 1)
    start.setHours(0, 0, 0, 0)

    const end = new Date(now.getFullYear(), quarterStartMonth + 3, 0)
    end.setHours(23, 59, 59, 999)
    return [start, end]
}

const shortcuts = [
    {
        text: '七天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            start.setHours(0, 0, 0, 0)
            end.setHours(23, 59, 59, 999)
            return [start, end]
        },
    },
    {
        text: '当月',
        value: () => {
            const [start, end] = getMonthRange()
            return [start, end]
        },
    },
    {
        text: '季度',
        value: () => {
            const [start, end] = getQuarterRange()
            return [start, end]
        },
    },
]

const time_value = ref('')



const exposureChartRef = ref()
const deepChartRef = ref()
const goalsChartRef = ref()
const costChartRef = ref()

// 图表数据
const chartData = ref<ChartData>({
    dates: [],
    costData: [],
    conversionData: [],
    clickRateData: [],
    conversionRateData: []
})

// 获取默认图表数据
const getDefaultChartData = (): ChartData => ({
    dates: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    costData: [0, 0, 0, 0, 0, 0, 0],
    conversionData: [0, 0, 0, 0, 0, 0, 0],
    clickRateData: [0, 0, 0, 0, 0, 0, 0],
    conversionRateData: [0, 0, 0, 0, 0, 0, 0]
})

// 初始化用户分析图
const initExposureChart = () => {
    if (!exposureChartRef.value) return

    const chart = echarts.init(exposureChartRef.value)
    const option = {
        grid: { top: '15%', left: '0%', right: '0%', bottom: '0%', containLabel: false },
        legend: { show: false },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        series: [
            {
                name: '曝光',
                type: 'line',
                data: [1000, 1200, 1100, 1300, 1800, 2000, 1900],
                smooth: true,
                lineStyle: { color: '#f57777', width: 3 },
                itemStyle: { color: '#f57777' },
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(245, 119, 119, 0.3)' },
                        { offset: 1, color: 'rgba(245, 119, 119, 0.1)' }
                    ])
                }
            },

        ],
        tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

// 初始化用户分析图
const initDeepChart = () => {
    if (!deepChartRef.value) return

    const chart = echarts.init(deepChartRef.value)
    const option = {
        grid: { top: '15%', left: '0%', right: '0%', bottom: '0%', containLabel: false },
        legend: { show: false },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        series: [
            {
                name: '曝光',
                type: 'line',
                data: [1000, 1200, 1100, 1300, 1800, 2000, 1900],
                smooth: true,
                lineStyle: { color: '#4ea6ff', width: 3 },
                itemStyle: { color: '#4ea6ff' },
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(78, 166, 255, 0.3)' },
                        { offset: 1, color: 'rgba(78, 166, 255, 0.1)' }
                    ])
                }
            }
        ],
        tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

// 初始化用户分析图
const initGoalsChart = () => {
    if (!goalsChartRef.value) return

    const chart = echarts.init(goalsChartRef.value)
    const option = {
        grid: { top: '15%', left: '0%', right: '0%', bottom: '0%', containLabel: false },
        legend: { show: false },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        series: [
            {
                name: '曝光',
                type: 'line',
                data: [1000, 1200, 1100, 1300, 1800, 2000, 1900],
                smooth: true,
                lineStyle: { color: '#e7a848', width: 3 },
                itemStyle: { color: '#e7a848' },
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(231, 168, 72, 0.3)' },
                        { offset: 1, color: 'rgba(231, 168, 72, 0.1)' }
                    ])
                }
            }
        ],
        tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

// 初始化用户分析图
const initCostChart = () => {
    if (!costChartRef.value) return

    const chart = echarts.init(costChartRef.value)
    const option = {
        grid: { top: '15%', left: '0%', right: '0%', bottom: '0%', containLabel: false },
        legend: { show: false },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
        },
        series: [
            {
                name: '曝光',
                type: 'line',
                data: [1000, 1200, 1100, 1300, 1800, 2000, 1900],
                smooth: true,
                lineStyle: { color: '#67C23A', width: 3 },
                itemStyle: { color: '#67C23A' },
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
                        { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
                    ])
                }
            }
        ],
        tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

const exposureChartRingRef = ref()
const deepChartRingRef = ref()
const goalsChartRingRef = ref()
const costChartRingRef = ref()

const initExposureRingChart = () => {
    if (!exposureChartRingRef.value) return

    const chart = echarts.init(exposureChartRingRef.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

const initDeepRingChart = () => {
    if (!deepChartRingRef.value) return

    const chart = echarts.init(deepChartRingRef.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

const initGoalsRingChart = () => {
    if (!goalsChartRingRef.value) return

    const chart = echarts.init(goalsChartRingRef.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}


const initCostRingChart = () => {
    if (!costChartRingRef.value) return

    const chart = echarts.init(costChartRingRef.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    }
    chart.setOption(option)

    window.addEventListener('resize', () => {
        chart.resize()
    })
    setTimeout(() => {
        chart.resize()
    }, 100)
}

const chartLoading = ref(false)
const revenueChartRef = ref<HTMLElement>()

// 初始化收入趋势图
const initRevenueChart = () => {
    if (!revenueChartRef.value) return

    const chart = echarts.init(revenueChartRef.value)
    const option = {
        grid: { top: '10%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
        legend: {
            data: ['本周期数据', '上周期数据']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: chartData.value.dates.length > 0 ? chartData.value.dates : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [
            {
                name: '消耗',
                data: chartData.value.costData.length > 0 ? chartData.value.costData : [8200, 9320, 9010, 9340, 12900, 13300, 13200],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                        { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
                    ])
                },
                lineStyle: { color: '#409EFF' },
                itemStyle: { color: '#409EFF' }
            },
            {
                name: '消耗',
                data: chartData.value.costData.length > 0 ? chartData.value.costData : [5000, 720, 6010, 7040, 15000, 1100, 14200],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 108, 2, 0.3)' },
                        { offset: 1, color: 'rgba(255, 108, 2, 0.1)' }
                    ])
                },
                lineStyle: { color: '#ff6c02' },
                itemStyle: { color: '#ff6c02' }
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function (params: any) {
                let result = params[0].name + '<br/>'
                params.forEach((item: any) => {
                    result += item.marker + item.seriesName + ': ' + item.value + '<br/>'
                })
                return result
            }
        }
    }
    chart.setOption(option)

    // 监听窗口大小变化，重新计算图表大小
    window.addEventListener('resize', () => {
        chart.resize()
    })

    // 延迟调整大小，确保容器已经渲染
    setTimeout(() => {
        chart.resize()
    }, 100)
}


const zsChangeMth = (e: any) => {
    switch (e) {
        case '趋势图':
            nextTick(() => {
                initExposureChart()
                initDeepChart()
                initGoalsChart()
                initCostChart()
            })
            break;
        case '环比图':
            nextTick(() => {
                initExposureRingChart()
                initDeepRingChart()
                initGoalsRingChart()
                initCostRingChart()
            })
            break
    }
}

onMounted(() => {
    nextTick(() => {
        initExposureChart()
        initDeepChart()
        initGoalsChart()
        initCostChart()
        initRevenueChart()
    })
})








</script>

<style lang="scss" scoped>
.header-tips {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 10px 24px;
    margin-bottom: 5px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
        pointer-events: none;
    }

    .header-tips-content {
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
        z-index: 1;
        color: white;

        .tips-left {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-shrink: 0;

            .icon-wrapper {
                .warning-icon {
                    font-size: 24px;
                    color: #ffd700;
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
                }
            }

            .tips-info {
                .tips-label {
                    font-size: 18px;
                    font-weight: 600;
                    color: #ffffff;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                }

                .tips-time {
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.8);
                    font-weight: 400;
                }
            }
        }

        .tips-divider {
            display: flex;
            align-items: center;
            padding: 0 8px;

            .arrow-icon {
                font-size: 20px;
                color: rgba(255, 255, 255, 0.7);
                animation: pulse 2s infinite;
            }
        }

        .tips-content {
            flex: 1;
            font-size: 16px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.95);
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 20px;
            border-radius: 8px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
                animation: shimmer 3s infinite;
            }
        }
    }
}

.segmented-wrap {
    margin-top: 12px;

    :deep(.el-segmented) {
        --el-border-radius-base: 10px;
        background: #ffffff;
        border: 1px solid #eef0f6;
        box-shadow: 0 4px 16px rgba(31, 45, 61, 0.06);
        padding: 8px;

        .el-segmented__item {
            border-radius: 8px;
            transition: all 0.2s ease;

            &:hover {
                background: #f6f8fd;
            }
        }

        .el-segmented__item.is-selected {
            background: linear-gradient(135deg, #8ea6ff 0%, #a88beb 100%);
            color: #fff;
            box-shadow: 0 6px 18px rgba(136, 160, 255, 0.35);
        }
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .header-tips {
        padding: 16px 20px;
        margin-bottom: 20px;

        .header-tips-content {
            flex-direction: column;
            align-items: center;
            gap: 16px;
            text-align: center;

            .tips-left {
                flex-direction: column;
                gap: 12px;

                .icon-wrapper {
                    width: 40px;
                    height: 40px;

                    .warning-icon {
                        font-size: 20px;
                    }
                }
            }

            .tips-divider {
                transform: rotate(90deg);
            }

            .tips-content {
                text-align: left;
                padding: 14px 16px;
                font-size: 14px;
            }
        }
    }
}


.echarts-wrap {
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}

.metric-card :deep(.el-card__body) {
    padding: 10px 12px;
}

.metric-card {
    // background: #0f1b2d;
    border: 1px solid rgba(100, 181, 246, 0.25);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.25);
    color: #cfd8dc;
}

.metric-title {
    font-size: 14px;
    color: #000;
    font-weight: 900;
}

// .metric-value {
//     font-size: 26px;
//     font-weight: 700;
//     color: #e3f2fd;
//     margin-top: 2px;
// }

.metric-value1 {
    font-size: 26px;
    font-weight: 700;
    color: #f57777;
    margin-top: 2px;
}

.metric-value2 {
    font-size: 26px;
    font-weight: 700;
    color: #4ea6ff;
    margin-top: 2px;
}


.metric-value3 {
    font-size: 26px;
    font-weight: 700;
    color: #e7a848;
    margin-top: 2px;
}


.metric-value4 {
    font-size: 26px;
    font-weight: 700;
    color: #7bc953;
    margin-top: 2px;
}


.metric-delta {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 2px 0 8px 0;
}

.metric-delta.up {
    color: #4caf50;
}

.chart-container {
    flex: 1 1 0;
    min-width: 0;
    height: 90px;
}

.chart-container-count {
    height: 260px;
}

.chart-containerRing {
    flex: 1 1 0;
    min-width: 0;
    height: 200px;
}

/* 限制总高度不超过200 */
.echarts-wrap :deep(.el-card) {
    height: 180px;
}
</style>